<template>
	<view class="film">
		<view class="header">
			<u-search v-model="search" @search="searchEvent" @custom="searchEvent" :clearabled="true"
				@clear="searchClearEvent"></u-search>
		</view>
		<view class="btns">
			<u-button @click="openSiteSelect" size="mini">网站: {{ site.name }}</u-button>
			<u-button @click="openTypeSelect" size="mini">分类: {{ type.name }}</u-button>
			<text>共: {{recordcount}} 资源</text>
		</view>
		<view class="body">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<view class="box-warter left-box-warter" v-for="(item, index) in leftList" :key="index"
						@click="openDetail(item)">
						<u-lazy-load border-radius="4" :image="item.pic" :index="index"></u-lazy-load>
						<view class="box-name">{{ item.name }}</view>
						<view class="box-info">
							<view class="box-class">{{ item.type }}</view>
							<view class="box-class">{{ item.note }}</view>
							<view class="box-year">{{ item.year }}</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="box-warter right-box-warter" v-for="(item, index) in rightList" :key="index"
						@click="openDetail(item)">
						<u-lazy-load threshold="-450" border-radius="4" :image="item.pic" :index="index"></u-lazy-load>
						<view class="box-name">{{ item.name }}</view>
						<view class="box-info">
							<view class="box-class">{{ item.type }}</view>
							<view class="box-class">{{ item.note }}</view>
							<view class="box-year">{{ item.year }}</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="#f8f8f8" :status="loadStatus" @loadmore="addData"></u-loadmore>
		</view>
		<u-back-top :scroll-top="scrollTop" icon="search"></u-back-top>
		<u-select v-model="siteShow" :list="siteList" value-name="key" label-name="name" @confirm="siteConfirm">
		</u-select>
		<u-select v-model="typeShow" :list="typeList" value-name="tid" label-name="name" @confirm="typeConfirm">
		</u-select>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-mask :show="mask" @tap.stop>
			<view class="mask">
				<u-loading mode="flower" size="80"></u-loading>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import db from "../../utils/database.js";
	import http from "../../utils/request.js";
	export default {
		data() {
			return {
				search: "",
				site: {},
				siteShow: false,
				siteList: [],
				type: {},
				typeShow: false,
				typeList: [],
				flowList: [],
				loadStatus: "loadmore",
				scrollTop: 0,
				pageCount: 0,
				recordcount: 0,
				mask: false,
				r18KeyWords: ['伦理', '论理', '倫理', '福利', '激情', '理论', '写真', '情色', '美女', '街拍', '赤足', '性感', '里番']
			};
		},
		methods: {
			async searchEvent() {
				if (this.search === '') {
					return false
				}
				this.mask = true
				this.flowList = []
				this.$refs.uWaterfall.clear();
				const res = await http.search(this.site.key, this.search)
				if (res.length >= 1) {
					for (const i of res) {
						const data = await http.detail(this.site.key, i.id)
						this.flowList.push(data);
					}
				}
				this.mask = false
			},
			async searchClearEvent() {
				this.search = ''
				this.mask = true
				this.flowList = []
				this.$refs.uWaterfall.clear();
				await this.getPage(this.type.tid)
				await this.addData(this.site.key, this.pageCount, this.type.tid)
				this.pageCount--
				await this.addData(this.site.key, this.pageCount, this.type.tid)
				this.mask = false
			},
			async openSiteSelect() {
				this.siteShow = true;
				const site = await db.get("site", this.site.key);
			},
			async siteConfirm(e) {
				this.mask = true
				this.flowList = []
				this.$refs.uWaterfall.clear();
				const site = await db.get("site", e[0].value);
				this.site = site.data;
				await this.getPage()
				await this.getClass(this.site.key)
				await this.addData(this.site.key, this.pageCount)
				this.pageCount--
				await this.addData(this.site.key, this.pageCount)
				this.mask = false
			},
			openTypeSelect() {
				this.typeShow = true
			},
			async typeConfirm(e) {
				this.type = {
					name: e[0].label,
					tid: e[0].value
				}
				this.mask = true
				this.flowList = []
				this.$refs.uWaterfall.clear();
				await this.getPage(this.type.tid)
				await this.addData(this.site.key, this.pageCount, this.type.tid)
				this.pageCount--
				await this.addData(this.site.key, this.pageCount, this.type.tid)
				this.mask = false
			},
			openDetail(item) {
				const url = `/pages/detail/detail?site=${this.site.key}&id=${item.id}`;
				this.$u.route({
					url: url
				});
			},
			async getSite() {
				const res = await db.getAll("site");
				if (res.flag) {
					const arr = []
					for (const i of res.data) {
						if (i.isActive) {
							arr.push(i)
						}
					}
					this.siteList = arr
				} else {
					this.$refs.uToast.show({
						title: '读取视频源出错',
						type: 'warning',
						duration: '2300'
					})
					return false
				}
				this.site = this.siteList[0]
				await this.getPage()
				await this.getClass(this.site.key)
				await this.addData(this.site.key, this.pageCount)
				this.pageCount--
				await this.addData(this.site.key, this.pageCount)
			},
			async getPage(type) {
				const res = await http.page(this.site.key, type)
				this.pageCount = res.pagecount
				this.recordcount = res.recordcount
			},
			async getClass(key) {
				this.typeList = [{
					name: '最新',
					tid: 0
				}]
				this.type = {
					name: '最新',
					tid: 0
				}
				http.class(key).then(res => {
					// 屏蔽主分类
					const classToHide = ['电影', '电影片', '电视剧', '连续剧', '综艺', '动漫']

					res.forEach(ele => {
						if (!classToHide.includes(ele.name)) {
							this.typeList.push(ele)
						}
					})
				})
			},
			async addData(key, page, t) {
				console.log(key, page, t, 'lalala')
				const res = await http.list(key, page, t);
				if (typeof(res) != 'undefined') {
					const config = await db.get('setting', 'config')
					for (let i = 0; i < res.length; i++) {
						let item = res[i];
						if (config.data.R18) {
							const j = this.r18KeyWords.some(v => item.name.includes(v))
							const k = this.r18KeyWords.some(v => item.type.includes(v))
							if (j !== true && k !== true) {
								this.flowList.push(item);
							}
						} else {
							this.flowList.push(item);
						}
					}
					if (this.flowList.length <= 6 && page) {
						this.pageCount--;
						this.addData(key, this.pageCount, t);
					}
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getSite();
		},
		async onReachBottom() {
			if (this.search !== '') {
				this.loadStatus = "nomore";
				return false
			}
			this.loadStatus = "loading";
			this.pageCount--
			await this.addData(this.site.key, this.pageCount, this.type.tid);
			this.loadStatus = "loadmore";
		},
		onTabItemTap() {
			this.getSite();
		}
	};
</script>

<style lang="scss" scoped>
	.film {
		padding: 20rpx 20rpx;
		background-color: #f8f8f8;

		.btns {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.body {
			.box-warter {
				border-radius: 8rpx;
				padding: 14rpx;
				background-color: #fff;

				.box-info {
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					font-size: 12px;
				}
			}

			.left-box-warter {
				margin: 10rpx 10rpx 10rpx 0;
			}

			.right-box-warter {
				margin: 10rpx 0rpx 10rpx 10rpx;
			}
		}

		.mask {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
